<template>
	<view class="article-detail">
		<view class="top-title">
			<view class="title">{{ article.articleTitle }}</view>
			<view class="create-time">{{ article.createTime }}</view>
		</view>
		<view class="content">
			<rich-text class="markdown-body" :nodes="articleContentRendered"></rich-text>
		</view>
	</view>
</template>

<script>
	import marked from 'marked'
	
	export default {
		data() {
			return {
				article: {
					articleId: ''
				}
			}
		},
		computed: {
			articleContentRendered: function () {
				return this.article.articleContent ? this.renderArticleContent() : ''
			}
		},
		methods: {
			markdown() {
				marked.setOptions({
					renderer: new marked.Renderer(),
					gfm: true,
					tables: true,
					breaks: true,
					pedantic: false,
					sanitize: false,
					smartLists: true,
					smartypants: false
				})
			},
			renderArticleContent() {
				return marked(this.article.articleContent, {sanitize: false})
			},
			async getArticle() {
				let url = '/blog/article/' + this.article.articleId
				const res = await this.$myRequest({ url })
				this.article = res.data
			}
		},
		onLoad(options) {
			this.article.articleId = options.id
			
			this.getArticle()
		}
	}
</script>

<style scoped lang="scss">
.article-detail {
	padding: 30rpx 30rpx;
	.top-title {
		.title {
			font-size: 44rpx;
		}
		.create-time {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>
